<template>
	<view>
		<u-navbar back-icon-color="#f1f1f1" title-color="#f1f1f1" title="充值中心" :background="navbarBackground"></u-navbar>
		<view class="main">
			<view class="form">
				<text class="label">充值金额（元）</text>
				<view class="item">
					<text class="symbol">￥</text>
					<u-input v-model="money" placeholder="请输入充值金额" :custom-style="customStyle"></u-input>
				</view>
			</view>
			<view class="method">
				<text class="method-title">请选择支付方式</text>
				<view class="method-item" @tap="currentPayMethod = 1">
					<view class="left">
						<u-image width="60" height="60" :src="require('../../../../static/image/wechat.png')"></u-image>
						<text>微信钱包</text>
					</view>
					<u-icon :color="currentPayMethod == 1 ? '#3E70C2' : '#999'" size="45" :name="currentPayMethod == 1 ? 'checkmark-circle-fill' : 'checkmark-circle'"></u-icon>
				</view>
			</view>
		</view>
		<view class="btns"><u-button class="btn" :custom-style="btnStyle" shape="circle" :ripple="true" ripple-bg-color="#8EB7FA" @click="handleConfirmPay">确认支付</u-button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			navbarBackground: {
				backgroundImage: 'linear-gradient(90deg, rgb(27,52,92), rgb(49,84,142))'
			},
			customStyle: {
				fontSize: '1.2rem'
			},
			btnStyle: {
				backgroundColor: '#3d6fc1',
				color: '#f1f1f1'
			},
			money: '',
			currentPayMethod: 0
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		uni.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
	},
	methods: {
		// 支付
		handleConfirmPay() {
			if (this.money == '') {
				uni.showToast({
					title: '请输入充值金额',
					icon: 'none'
				});
				return false;
			} else if (this.money == 0) {
				uni.showToast({
					title: '充值金额不能为0',
					icon: 'none'
				});
				return false;
			} else if (this.currentPayMethod > 0) {
				uni.showLoading({
					title: '正在支付...'
				});
				// 创建订单
				this.$tkRequest('/api/Orders/recharge', {
					money: this.money,
					type: this.currentPayMethod
				}).then(res => {
					let recharge_id = res.data.recharge_id;
					// #ifdef MP-WEIXIN
					this.$tkRequest('/api/Recharge/wxpay', {
						recharge_id: recharge_id
					}).then(res => {
						let result = res.data;
						if (result) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: {},
								appId: result.appId,
								nonceStr: result.nonceStr,
								package: result.package,
								paySign: result.paySign,
								signType: result.signType,
								timeStamp: result.timeStamp,
								success: function(res) {
									uni.navigateBack();
								}
							});
						}
					});
					// #endif

					// #ifdef APP-PLUS
					this.$tkRequest('/api/Apppay/payByWeChat', {
						recharge_id: recharge_id
					}).then(res => {
						let result = res.data.config;
						if (result) {
							uni.requestPayment({
								provider: 'wxpay',
								orderInfo: {
									appid: result.appid,
									noncestr: result.noncestr,
									package: result.package,
									partnerid: result.partnerid,
									prepayid: result.prepayid,
									timestamp: result.timestamp,
									sign: result.sign
								},
								success: function(res) {
									uni.navigateTo({
										url: `../result?type=recharge&method=${this.currentPayMethod}`
									});
								}
							});
						}
					});
					// #endif

					// #ifdef H5
					this.$tkRequest('/api/Recharge/wxpay', {
						recharge_id: recharge_id
					}).then(res => {
						let result = res.data;
						if (result) {
							this.$nextTick(() => {
								this.$wxPay(result);
							});
						}
					});
					// #endif
				});
			} else {
				uni.showToast({
					title: '请选择支付方式',
					icon: 'none'
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	padding: $uni-spacing-col-lg 0;

	.form {
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		display: flex;
		flex-direction: column;

		.label {
			font-size: 12pt;
			color: #808080;
		}

		.item {
			display: flex;
			align-items: center;
			padding: $uni-spacing-col-lg 0;

			.symbol {
				font-size: 15pt;
				margin-right: 20rpx;
			}

			.u-input {
				font-size: 1.5rem;
				margin-left: 20rpx;
				border-bottom: 1rpx solid #007aff;
			}
		}
	}

	.method {
		margin-top: 50rpx;
		padding: $uni-spacing-col-lg $uni-spacing-row-lg;
		display: flex;
		flex-direction: column;
		background-color: #fff;

		.method-title {
			font-size: 11pt;
			padding-bottom: $uni-spacing-col-lg;
		}

		.method-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: $uni-spacing-col-base 0;

			.left {
				display: flex;
				align-items: center;

				text {
					padding-left: 15rpx;
				}
			}
		}
	}
}

.btns {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: $uni-spacing-col-lg $uni-spacing-row-lg;
}
</style>
